<template>
    <div class="accounting">
        <div class="breadcrumb">
            位置：首页<span>></span>小竹问答<span>></span>
        </div>
        <div class="info">
            <div class="user">
                <img
                    :src="QuizDetail.uid.avatar"
                    :alt="QuizDetail.uid.nickname"
                />
                <div class="name-time">
                    <div>{{ QuizDetail.uid.nickname }}</div>
                    {{ questionsInfo.add_time_text }}
                </div>
            </div>
            <div class="title">
                {{
                    questionsInfo.subtitle
                        ? questionsInfo.subtitle
                        : questionsInfo.title
                }}
            </div>
        </div>

        <div class="message-list">
            <chatList
                v-if="questionsInfo.id"
                :quizData="questionsInfo"
                :curMessageList="curMessageList"
                :QuizDetail="QuizDetail"
                :isDetail="true"
                @previewImg="previewImg"
            ></chatList>
        </div>
    </div>
</template>

<script>
import {
    getQuizDetail_chat,
    setLike_chat,
    delMyComment_chat,
    addQuizSubmit_chat,
    addCommentSubmit_chat,
    setLikecomment_chat,
    setCollect_chat,
    getJhmjList,
    getquizcount_chat,
    major_select,
    getWendaList,
    getWdTags,
    getKeywordList,
} from "@/assets/api/csjhApi";
import { ImagePreview } from 'vant';
import { escape2Html, goTopSmooth, getText } from "@/assets/utils/utils";
import { getanalysedata2 } from "@/assets/api/indexApi";
import chatList from "@/components/csjh/chatList";
export default {
    components: {
        chatList,
    },
    async asyncData({ params }) {
        let data = {
            commentList: [], // 评论列表
            metaTitle: "小竹问答",
            metaDescription: "",
            curMessageList: [],
            questionsInfo: {},
            QuizDetail: false,
            id: params.id.replace(".html", ""),
            keywords: "",
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/cswd/",
                images: [""],
                title: "",
                description: "",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },
        };

        data.jsonld["@id"] += params.id;

        let paramsData = {
            quiz_id: data.id,
            status: 3,
        };
        var res = await getQuizDetail_chat(paramsData);
        if (res.code == 1) {
            data.QuizDetail = res.data;
            data.QuizDetail.quiz.info_images =
                data.QuizDetail.quiz.info_images.split(",");
            data.QuizDetail.quiz.info_images =
                data.QuizDetail.quiz.info_images.filter((item) => item);

            data.questionsInfo = data.QuizDetail.quiz;

            for (let item of data.QuizDetail.chatroomtext) {
                try {
                    let str = escape2Html(item.message);
                    let message = JSON.parse(str);
                    message.is_supplement = item.is_supplement;
                    data.curMessageList.push(message);
                } catch (error) {
                    console.log("getJhmjDetail1", error);
                }
            }

            if (data.questionsInfo.nextdata)
                data.questionsInfo.nextdata.add_time_text =
                    data.questionsInfo.nextdata.add_time_text.substring(0, 10);
            if (data.questionsInfo.prevdata)
                data.questionsInfo.prevdata.add_time_text =
                    data.questionsInfo.prevdata.add_time_text.substring(0, 10);
            data.jsonld.pubDate = data.jsonld.upDate =
                data.questionsInfo.add_time_text;

            data.metaTitle = data.questionsInfo.subtitle
                ? data.questionsInfo.subtitle
                : data.questionsInfo.title;
            data.metaDescription = data.questionsInfo.abstract;
            data.keywords = data.questionsInfo.keyword;
            data.commentList = data.QuizDetail.comment;
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.keywords,
                },
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
            ],
        };
    },
    data() {
        return {};
    },
    created() {},
    mounted() {
        console.log(this.curMessageList);
        goTopSmooth();
        getanalysedata2({
            m_id: 4,
            type: 1,
            describe: this.metaTitle,
            code: "PC7",
        });
    },
    computed: {},
    methods: {
        previewImg(imgs){
            // console.log(imgs)
            ImagePreview(imgs);
        }
    },
};
</script>
<style lang="scss" scoped>
.accounting {
    background: #f6f6f6;
}
.breadcrumb {
    height: 2.28rem;
    line-height: 2.28rem;
    padding-left: 1.43rem;
    font-size: 0.75rem;
    color: #666666;
    background: #e8f4ff;
    border-bottom: 1px solid #f6f6f6;
}

.info {
    background: #ffffff;
    padding: 0.6rem 1.1rem;
    padding-bottom: 1rem;
    .user {
        display: flex;
        align-items: center;
        margin-bottom: 1.25rem;
        img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 2.5rem;
            object-fit: cover;
        }
        .name-time {
            font-weight: 400;
            font-size: 0.68rem;
            color: #999999;
            padding-left: 0.78rem;
            div {
                font-size: 0.75rem;
                color: #333333;
            }
        }
    }
    .title {
        font-weight: 400;
        font-size: 0.93rem;
        color: #333333;
        line-height: 1.5;
    }
}
</style>
